<!--
* @desc
* @Author: bitqiang<bitqiang@outlook.net>
* @date: 2018/7/8 16:26
-->

<template>
  <div class="warp">
    <button v-if="!userInfo.avatarUrl" open-type="getUserInfo" @getuserinfo="getUserInfo">获取头像昵称</button>
    <div v-else>
      <image class="userinfo-avatar" :src="userInfo.avatarUrl" mode="cover"></image>
      <span class="text">{{userInfo.nickName}}的总健身(分钟)</span>
      <span class="text"></span>
    </div>
    <div class="text totle_time">{{totleMinte}}</div>
    <scroll-view scroll-y="true" class="scroll">
      <div class="scroll-title">
        <span>健身项目</span>
        <span @click="addItem">+添加项目</span>
      </div>
      <div v-for="(item,index) in project" :key="index" class="stort_list" @longpress="longpress(index)" @click="curClickHandle(index)" @touchmove="touchmoveHandler($event,index)" @touchstart="touchstartHandler" @touchend="touchendHandler">
        <span>{{item.sport[4].value}}</span>
        <div :animation="item.animationData" style="transform:translateX(230rpx)">
          <span>{{item.totleTime}}</span>
          <div class="delete-text">
            <span>编辑</span>
            <span>删除</span>
          </div>
        </div>
      </div>
    </scroll-view>
  </div>
</template>

<script>
  import {mapActions, mapState} from 'vuex'
  export default {
    name: 'index',
    data () {
      return {
        touch: {
          time: 0,
          interval: null,
          touchDot: 0,
          tmpFlag: true
        },
        userInfo: {},
        stortList: [
          {
            name: 'Tabata',
            totle: 12
          },
          {
            name: 'Tabata',
            totle: 12
          }
        ],
        curClick: {},
        project: []
      }
    },
    props: {},
    mixins: [],
    computed: {
      ...mapState({
        totle: state => state.totle
      }),
      totleMinte () {
        return Math.floor(this.totle / 60)
      }
    },
    watch: {},
    methods: {
      ...mapActions(['updateProject']),
      longpress (index) {
        wx.showActionSheet({
          itemList: ['编辑', '删除'],
          success: res => {
            if (res.tapIndex === 0) {
              this.$router.push({path: '/pages/addItem', query: {index}})
            } else {
              wx.showModal({
                title: '确定要删除项目吗？',
                success: res => {
                  if (res.confirm) {
                    this.project.splice(index, 1)
                    this.updateProject(this.project)
                  }
                }
              })
            }
          },
          fail: res => {
            console.log(res.errMsg)
          }
        })
      },
      curClickHandle (index) {
        this.$router.push({path: '/pages/time', query: {index}})
      },
      touchstartHandler (e) {
        this.touch.touchDot = e.touches[0].pageX // 获取触摸时的原点
        // 使用js计时器记录时间
        this.touch.interval = setInterval(() => {
          this.touch.time++
        }, 100)
      },
      touchmoveHandler (e, index) {
        let touchMove = e.touches[0].pageX
        if (touchMove - this.touch.touchDot <= -100 && this.touch.time < 10 && this.touch.tmpFlag) {
          this.touch.tmpFlag = false
          let animation = wx.createAnimation({
            duration: 1000,
            timingFunction: 'ease'
          })
          this.animation = animation
          animation.translate(-6, 0).step({ duration: 1000 })
          console.log('animation.export()', animation.export())
          this.project[index].animationData = animation.export()
          console.log('this.project[index]', this.project)
          console.log('// 向左滑动----------------------------------------------------------------------------')
        }
      },
      touchendHandler () {
        this.touch.tmpFlag = true
        this.touch.time = 0
        clearInterval(this.touch.interval)
      },
      getUserInfo (e) {
        this.userInfo = e.target.userInfo
        this.$store.dispatch('getUserInfo', e.target)
      },
      addItem () {
        this.$router.push('/pages/addItem')
      },
      toExercise (index) {
        this.$router.push({path: '/pages/time', query: {index}})
      }
    },
    created () {
      wx.getSetting({
        success: res => {
          if (res.authSetting['scope.userInfo']) {
            // 已经授权，可以直接调用 getUserInfo 获取头像昵称
            wx.getUserInfo({
              success: res => {
                this.$store.dispatch('getUserInfo', res)
                this.userInfo = res.userInfo
              }
            })
          }
        }
      })
    },
    beforeMount () {
      this.$store.commit('getStore')
      this.userInfo = this.$store.state.userInfo.userInfo ? this.$store.state.userInfo.userInfo : {}
    },
    mounted () {
      this.project = this.$store.state.project.map(item => {
        item.animationData = function () {}
        return item
      })
    },
    components: {}
  }
</script>

<style>

  page {
    display: block;
    min-height: 100%;
    background-color: #000000;
  }

  div {
    color: #ffffff;
  }

  .warp {
    height: 1000rpx;
  }

  .userinfo-avatar {
    width: 128rpx;
    height: 128rpx;
    margin: 20rpx;
    margin-left: 318rpx;
    border-radius: 50%;
  }

  .text{
    display: block;
    text-align: center;
  }
  .totle_time{
    margin-top: 20rpx;
    font-size: 65rpx;
  }

  .scroll{
    margin-top: 40rpx;
    border-top: 1px #808080 solid;
    border-bottom: 1px #808080 solid;
    padding-bottom: 30rpx;
  }

  .scroll-title{
    display: flex;
    justify-content: space-between;
    font-size: 25rpx;
    margin-left: 40rpx;
    margin-right: 40rpx;
    margin-top: 20rpx;
  }

  .stort_list{
    display: flex;
    justify-content: space-between;
    margin-left: 40rpx;
    margin-right: 40rpx;
    margin-top: 20rpx;
    padding-top: 30rpx;
    border-top: 1px #7F7F7E solid;
  }
  .delete-text{
    display: inline-block;
    margin-left: 30rpx;
  }
  .delete-text span{
    margin-left: 30rpx;
  }
</style>
